<template lang="">
  <div class="commonLayout">
    <!-- 背景 -->
    <div id="bgvid">
      <img src="~@/assets/img/bgbg.jpg" alt="">
    </div>
    <!-- 导航条 -->
    <nav>
      <common-header @goTo="goTo()" class="wow slideInRight common-header" style="top:0px"></common-header>
    </nav>
    <section>
      <div class="wrapper marginTop">
        <el-row :gutter="10" class="head">
          <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
            <router-view></router-view>
          </el-col>
          <el-col :lg="6" :xl="6">
            <div class="grid-content bg-purple-light synopsis" ref="sidebar">
              <aside class="wow slideInRight">
                <!-- 简介 -->
                <personal-details class="wow slideInRight maginbot"></personal-details>
                <!-- 天气 -->
                <weathe></weathe>
                <!-- 音乐 -->
                <music></music>
              </aside>
            </div>

          </el-col>
        </el-row>
        <!-- 动画效果展示  -->
        <animation v-if="isShowDiv"></animation>
      </div>

    </section>
    <!-- 底部 -->

  </div>
</template>
<script>
    //导入头部
    import CommonHeader from './heaed.vue'
    //导入简介
    import PersonalDetails from './introduction.vue'
    //导入天气
    import weathe from './weather.vue';
    //导入网易云音乐
    import music from '../components/music.vue'
    export default {
        data() {
            return {
                isShowDiv: false,
                //地理位置
                position: {},
                //天气
                weathers: {}
            }
        },
        components: {
            CommonHeader,
            PersonalDetails,
            weathe,
            music
        },
        methods: {
            goTo() {
                this.isShowDiv = false
            }
        },
    }
</script>
<style lang="less" scoped>
    #bgvid {
        position: fixed;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        background-size: cover;
        img {
            width: 100%;
            height: 100%;
        }
    }
    
    .commonLayout {
        // width: 100%;
        // height: 100%;
        // 导航条
        .common-header {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 9999;
        }
        // 切换部分
        section {
            margin-top: 80px;
            .slideshowBox {
                margin-right: 7px;
            }
        }
        // 侧边栏
        aside {
            width: 100%;
            .maginbot {
                margin-bottom: 20px;
                width: 100%;
            }
            .celebrity {
                height: 255px;
                background: url("~@/assets/img/lx.jpg");
                background-position: center;
                background-size: 100%;
                z-index: 3;
                .item {
                    position: relative;
                    background: hsla(0, 0%, 100%, .5);
                    box-shadow: 0 0 15px rgb(44, 44, 44);
                    z-index: 99;
                    // background:hsla(hue, saturation, lightness, alpha);
                }
                .item::before {
                    position: absolute;
                    content: '';
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    z-index: 4;
                    filter: blur(20px);
                }
            }
        }
    }
    
    .showTransition {
        cursor: pointer;
        text-align: center;
        font-weight: 600;
    }
</style>